<template>
  <div class="demo-box">
    <canvas id="renderCanvas"></canvas>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import * as BABYLON from "babylonjs";
import {
  Engine,
  Scene,
  ArcRotateCamera,
  HemisphericLight,
  Vector3,
  MeshBuilder,
  Mesh
} from "babylonjs";
import { Camara3D } from "./camera3d";

@Component
export default class Camera extends Vue {
  beforeCreate() {
    window.addEventListener("DOMContentLoaded", () => {
      // Create the game using the 'renderCanvas'.
      let game = new Camara3D("renderCanvas");

      // Create the scene.
      game.createScene();

      game.createShape();

      // Start render loop.
      game.doRender();
    });
  }
}
</script>

<style lang="scss" scoped>
#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}
</style>
